<template>
  <el-container class="index-con">
    <el-header class="index-header">
      <navcon></navcon>
    </el-header>
    <el-container class="main-con">
      <el-aside :class="showclass" class="test-1">
        <leftnav></leftnav>
      </el-aside>
      <el-main class="index-main" :style="{background:'#e9eef3'}">
        <keep-alive :include="keepAlive">
          <router-view ref="subView"></router-view>
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
// 导入组件
import navcon from '../components/navcon.vue'
import leftnav from '../components/leftnav.vue'
import {mapState,mapActions} from 'vuex'
import {debounce} from '@/utils'
import keepAlive from '@/assets/js/keepAlive'
export default {
  name: 'index',
  data(){
    return{
      showclass: 'asideshow',
      keepAlive,
      enterFn:(e) => { // 回车提交表单
      // 兼容FF和IE和Opera
        let theEvent = window.event || e;
        let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13 && this.$refs.subView.editFormVisible) {
          this.$refs.subView.submit()
        }
      }
    }
  },
  computed:{
    ...mapState(['collapsed','cacheDepartments'])
  },
  mounted(){
    //科室用的比较多，先缓存
    if(this.cacheDepartments.length === 0)  this.getCacheDepartments()   //缓存一级科室
    // document.addEventListener('keydown',this.enterFn)
  },
  destroyed(){
    // document.removeEventListener('keydown',this.enterFn)
  },
  methods:{
    ...mapActions(['getCacheDepartments'])
  },
  watch:{
    collapsed(value){
      if(value){
        setTimeout(()=>{
          this.showclass = 'aside'
        },300)
      }else{
        this.showclass = 'asideshow'
      }
    }
  },
  // 注册组件
  components: {
    navcon,
    leftnav
  },
}
</script>
<style lang='less' scoped>
.index-con {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.main-con{
  height: 100vh - 60px;
}
.aside {
  width: 64px !important;
  height: 100%;
  // #334157
  background-color: #28729D;
  margin: 0px;
  box-sizing: border-box;
  border-top: solid 10px rgb(233, 238, 243);
}
.asideshow {
  width: 240px !important;
  height: 100%;
  // #334157
  background-color: #28729D;
  margin: 0px;
  box-sizing: border-box;
  border-top: solid 10px rgb(233, 238, 243);
}
.index-header{
  padding-left: 0px;
}
.el-main{
  padding: 10px;
}
.test-1::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.test-1::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #909399;
}

.test-1::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    // border-radius: 10px;
    background: #e8e8e8;
}
</style>
